<template>
  <div>
    <div class="faqs-home">
      <div class="header">
        <span @click="comeBack" class="goBack">
          <van-icon name="arrow-left"
          /></span>
        {{ $t('h.A096') }}
      </div>
      <div class="safe"/>
      <div class="cell-vant">
        <van-cell-group>
          <van-cell
              v-for="(item, index) in list"
              class="van-haptics-feedback"
              :key="index"
              @click="changeActive(item)"
          >
            <template #title>
              <span class="cell-left">
                <img :src="item.icon" alt=""/>{{ item.name }}
              </span>
            </template>
            <template #right-icon>
              <span class="cell-right">
                <van-icon v-if="item.id === active" name="success"/>
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import {setItem} from '../../plugins';
import {Toast} from 'vant';
import {Locale} from 'vant';
import zhHK from 'vant/es/locale/lang/zh-HK';
import zhCN from 'vant/es/locale/lang/zh-CN';
import enUS from 'vant/es/locale/lang/en-US';
import esES from 'vant/es/locale/lang/es-ES';
import jaJP from 'vant/es/locale/lang/ja-JP';

export default {
  data() {
    return {
      active: 1,
      list: [
        {
          id: 1,
          name: '繁體中文',
          value: 'tw',
          langText: 'tw',
          vant: ['zh-HK', zhHK],
          icon: require('../../assets/image/lang/tw.png'),
        },
        {
          id: 13,
          name: '简体中文',
          value: 'zh-CN',
          langText: 'zh-CN',
          vant: ['zh-CN', zhCN],
          icon: require('../../assets/image/lang/zh-CN.png'),
        },
        {
          id: 2,
          name: 'English',
          value: 'en',
          langText: 'en',
          vant: ['en-US', enUS],
          icon: require('../../assets/image/lang/en.png'),
        },
        {
          id: 3,
          name: 'Español',
          value: 'es',
          langText: 'es',
          vant: ['es-ES', esES],
          icon: require('../../assets/image/lang/es.png'),
        },
        {
          id: 4,
          name: 'Português',
          value: 'pt',
          langText: 'pt',
          icon: require('../../assets/image/lang/pt.png'),
        },
        {
          id: 5,
          name: '日本語',
          value: 'ja',
          langText: 'ja',
          vant: ['ja-JP', jaJP],
          icon: require('../../assets/image/lang/ja.png'),
        },
        {
          id: 6,
          name: '한국어',
          value: 'ko',
          langText: 'ko',
          icon: require('../../assets/image/lang/ko.png'),
        },
        {
          id: 7,
          name: 'हिंदी',
          value: 'hi',
          langText: 'hi',
          icon: require('../../assets/image/lang/hi.png'),
        },
        {
          id: 8,
          name: 'Deutsch',
          value: 'de',
          langText: 'de',
          icon: require('../../assets/image/lang/de.png'),
        },
        {
          id: 9,
          name: 'عربي',
          value: 'ar',
          langText: 'ar',
          icon: require('../../assets/image/lang/ar.png'),
        },
        {
          id: 10,
          name: 'Русский',
          value: 'ru',
          langText: 'ru',
          icon: require('../../assets/image/lang/ru.png'),
        },
        {
          id: 11,
          name: 'français',
          value: 'fr',
          langText: 'fr',
          icon: require('../../assets/image/lang/fr.png'),
        },
        {
          id: 12,
          name: 'Tiếng Việt',
          value: 'vi',
          langText: 'vi',
          icon: require('../../assets/image/lang/vi.png'),
        },
      ],
    };
  },
  methods: {
    comeBack() {
      // this.$router.push('/mine')
      this.$router.go(-1);
    },
    changeActive(item) {
      Toast.loading({forbidClick: true});
      this.active = item.id;
      this.$store.state.lang = item;
      setItem('lang', item);
      this.$i18n.locale = item.value;
      if (item?.vant) {
        Locale.use(item.vant[0], item.vant[1]);
      } else {
        Locale.use('en-US', enUS);
      }
      setTimeout(() => {
        this.comeBack();
      }, 1000);
    },
  },
  mounted() {
    if (this.$store.state.lang) {
      this.active = this.$store.state.lang.id;
    }
  },
};
</script>

<style scoped lang="scss">
.faqs-home {
  width: 100%;
  box-sizing: border-box;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    height: 45px;
    width: 100%;
    text-align: center;
    line-height: 45px;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 16px;

    .goBack {
      position: absolute;
      left: 10px;
    }
  }

  .safe {
    width: 100%;
    height: 45px;
  }

  .cell-vant {
    width: 100%;
    min-height: 100vh;

    .cell-left {
      display: flex;
      align-items: center;
      font-size: 14px;

      img {
        margin-right: 10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
      }
    }

    .cell-right {
      font-size: 18px;
      color: #002fff;
    }
  }
}
</style>
